<template>
  <div class="box">
    <h1>商品列表</h1>
    <ProductListComponents :list="product"/>
    <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        @current-change="getProductHot"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
import ProductListComponents from "@/components/ProductListComponents";
export default {
  name: "ProductList",
  components : {
    ProductListComponents
  },
  data(){
    return {
      size : 8,
      current : 1,
      product : [],
      total : 0,
    }
  },
  created() {
    this.getProductHot(1)
  },
  methods : {
    getProductHot(current) {
      this.current = current
      this.axios
      .post("/api/product", {
        size : this.size,
        current : this.current,
      })
      .then((res) => {
        if (res.status == 200){
          this.product = res.data.records
          this.total = parseInt(res.data.total)
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.box{
  width: 1200px;
  margin: 0 auto;
  padding: 10px 0;
}
</style>